import React from 'react';
// 1. 函数组件
function FunctionComponent() {
  const handleClick = () => {
    alert('函数组件按钮被点击了！');
  };
  return <button onClick={handleClick}>点击我 - 函数组件</button>;
}
// 2. 类组件
class ClassComponent extends React.Component {
  handleClick() {
    alert('类组件按钮被点击了！');
  }
  render() {
    return <button onClick={() => this.handleClick()}>点击我 - 类组件</button>;
  }
}
// 3.事件绑定
function EventBindingComponent() {
  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault();
    alert('链接被点击了！');
  };
  return (
    <a href="https://www.example.com" onClick={handleClick}>
      点击我 - 事件绑定
    </a>
  );
}
// 4. 使用箭头函数绑定事件
interface ArrowFunctionBindingComponentState {
  count: number;
}

class ArrowFunctionBindingComponent extends React.Component<
  object,
  ArrowFunctionBindingComponentState
> {
  constructor(props: object) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = (id: number, event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    console.log(event);
    console.log('Button clicked:', id);
    this.setState(prevState => ({
      count: prevState.count + 1,
    }));
  };
  render() {
    return (
      <div>
        <button onClick={e => this.handleClick(1, e)}>Click me</button>
        <p>Button clicked {this.state.count} times</p>
      </div>
    );
  }
}

export {
  FunctionComponent,
  ClassComponent,
  EventBindingComponent,
  ArrowFunctionBindingComponent,
};
